import React from 'react'
import BaseComponent from '../../components/common/baseComponent'
import {
  Image,
  TouchableOpacity,
  StyleSheet
} from 'react-native'

import ballIcon from '../../../assets/images/icon/loading.gif'
// import xeIcon from '../../../assets/img/icon/xe.gif';
// import spinnerIcon from '../../../assets/img/icon/spinner.gif';
// import RzLoading from './rzLoading'

import {
  WINDOW_WIDTH,
  WINDOW_HEIGHT
} from '../../constants/varibles'

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0
  },
  spinner: {
    width: 28,
    height: 28
  },
  spinnerBig: {
    height: WINDOW_HEIGHT,
    width: WINDOW_WIDTH
  }
})

class Loading extends BaseComponent {
  constructor (props) {
    super(props)
    this.displayName = 'Loading'
    this.touchLoading = this.touchLoading.bind(this)
  }

  touchLoading () {
    const { touchFunc } = this.props
    if (touchFunc) {
      touchFunc()
    }
  }

  render () {
    const { spinnerStyle, withMask, type } = this.props
    const maskStyle = [styles.container, {
      backgroundColor: withMask ? '#00000055' : 'transparent'
    }]
    let loadingView
    console.log('==type=', type)
    loadingView = (
      <Image
        source={ballIcon}
        style={[
          styles.spinner,
          spinnerStyle
        ]}
      />
    )
    return (
      <TouchableOpacity
        style={maskStyle}
        onPress={this.touchLoading}
      >
        {loadingView}
      </TouchableOpacity>
    )
  }
}

Loading.propTypes = {
  spinnerStyle: Image.propTypes.style,
  touchFunc: React.PropTypes.func,
  withMask: React.PropTypes.bool,
  type: React.PropTypes.oneOf(['ball', 'spinner']).isRequired
}

Loading.defaultProps = {
  withMask: true,
  type: 'spinner'
}

export default Loading
